<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.6/lib/index.css">
		<link rel="stylesheet" type="text/css" href="../css/main.css" />
		<link rel="stylesheet" type="text/css" href="../css/appindex.css"/>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
		<script src="https://cdn.jsdelivr.net/npm/vant@1.6/lib/vant.min.js"></script>
		<script src="../js/vue-lazyload.js"></script>
		<script src="html5plus://ready"></script>
		<script src="../js/listener_other.js"></script>
		<script src="../js/ajax.js"></script>
		<title>首页</title>
		<style>
			
		</style>
	</head>
	<body>
		<div id="app">
			<header>
				<van-row style="background-color: red;">
					<van-col span="22" >
						<form action="/">
							<van-search v-model="value" placeholder="搜索商品名称" background="red" />
						</form>
					</van-col>
					<van-col span="2" style="margin-top: 15px;">
						<van-icon name="chat-o" size="25px"></van-icon>
					</van-col>
				</van-row>
			</header>
			<section @click="onChange">
				<!-- 轮播图 -->
				<div style="padding-top: 10px;">
					<van-swipe :autoplay="3000" indicator-color="white">
						<van-swipe-item v-for="item in CarouselFigureList">
							<img :src="item.ImageUrl" class="swipeOne" style="width: 100%;" />
						</van-swipe-item>
					</van-swipe>
				</div>
				<!-- 酒水饮品和厨房用品 -->
				<div id="span-quan">
					<div id="jscp">
						<span id="alcohol">酒</span>
						<span id="kitchen">厨</span>
						<span id="kithuo">淘</span>
						<span id="kitdi">猫</span>
						<div id="fontsz">
							<span>酒水饮料<span><span style="margin: 7px;">厨房用品</span>
							<span><a href="#">淘宝购物</a><span><span style="margin-left: 22px;"><a href="#">天猫商品</a></span>
						</div>
					</div>
				</div>
				<div align="center">
					<van-row id="zixun">
						<van-col span="4">
							<span class="informat">资讯</span>
						</van-col>
						<van-col span="16">
							<van-notice-bar :text="info.Title"  background="#C8C9CC"></van-notice-bar>
						</van-col>
						<van-col span="4">
							<span class="more">更多</span>
						</van-col>
					</van-row>
				</div>
				<div id="rmtuijian">
					热门推荐
				</div>
				<div style="margin: 10px;" v-for="item in GoodsRecommendList">
					<img v-lazy="item.GoodsImageUrl.src" style="width: 50%;"  @click="Tupian(item.Id)">
					<div>
						{{item.Name}}
					</div>
					<div>
						<van-cell title=""></van-cell>
						<p slot="title" style="color: red;">￥{{item.MarketPrice}}</p>
					</div>
				</div>
				<div id="spliebiao" @click="onList">
					商品列表
				</div>
				<div v-for="item in Data"  @click="Tupian(item.Id)">
					<van-row style="margin: 10px;">
						<van-card
						 :num="item.VirtualSaleCount"
						 :price="item.RealPrice"
						 :origin-price="item.MarketPrice"
						 :title="item.Name" 	
						 lazy-load="true"
						 :thumb="item.GoodsImageUrl.src">
						</van-card>
					</van-row>
				</div>
			</section>
			<footer>

			</footer>
		</div>
		<script type="text/javascript">
			Vue.use(VueLazyload, {
				error: '../img/2.jpg',

			})
			var vm = new Vue({
				el: "#app",
				data: {
					value: "",
					CarouselFigureList: [],
					GoodsRecommendList: [],
					InformationList:[],
					Data:[],
					info:{Title:""}
				},
				methods: {
					onChange() {//整个获取
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexData",
							dataType: "jsonp",
							"success": function(res) {
								vm.CarouselFigureList = res.Data.CarouselFigureList;//轮播图
								vm.GoodsRecommendList = res.Data.GoodsRecommendList;//热门
								vm.InformationList=res.Data.InformationList;//资讯
								vm.Pid=res.Data.GoodsRecommendList[0].Id;
								this.info = vm.InformationList[0];
							}
						})
					},
					onList(){//商品列表
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType: "jsonp",
							"success": function(res) {
								vm.Data = res.Data;
							}
						})
					},
					Tupian(id){
						plus.webview.create("../details.html","details",{},{productId:id}).show();
					}
				},
				created: function() {
					_this = this;
					this.onChange();
					this.onList();
					var i = 0;
					
					setInterval(function(){//资讯循环轮播
						i++;
						if(i == _this.InformationList.length){
							i = 0;
						}
						_this.info = _this.InformationList[i];
					}, 1000);
				},

			})
		</script>
	</body>
</html>